<!--
 * @Description: 年度培训计划表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-01 17:50:37
-->
<template>
  <div class="TISchedule">
    <div style="padding-right: 7px;">
      <el-button type="primary" style="float:right" @click="exportWord"
        >导出Word</el-button
      >
    </div>
    <div class="mytable" v-loading="loading">
      <div class="table_title">
        <input class="titleInput" type="text" v-model="dataForm.year" />
        年度培训计划表
      </div>
      <el-row class="gaugeOutfit">
        <el-col :span="24" style="padding-left:10px"
          >培训机构：
          <input type="text" v-model="dataForm.pxjg" style="width:90%" />
        </el-col>
      </el-row>

      <table>
        <tr height="30px">
          <td width="60px">
            序号
          </td>
          <td width="140px">
            培训班编号
          </td>
          <td width="140px">
            培训对象
          </td>
          <td width="200px">培训内容</td>
          <td width="100px">
            人数
          </td>
          <td width="90px">总学时</td>
          <td>
            开班时间
          </td>
        </tr>

        <tr height="30px" v-for="(item, index) in list" :key="index">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>

      <el-row class="gaugeOutfit_bottom">
        <el-col :span="12" style="padding-left:10px"
          >机构负责人：
          <input type="text" v-model="dataForm.jgfzr" style="width:70%"
        /></el-col>

        <el-col :span="12" style="padding-left:10px"
          >填表人：
          <input type="text" v-model="dataForm.tbr" style="width:80%" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "TISchedule",
  data() {
    return {
      loading: true,
      dataForm: {},
      list: []
    };
  },
  created() {},
  methods: {
    init(id) {
      this.loading = true;
      request({
        url: "/api/class_archives/generateA9/" + id+`?organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        this.dataForm = res.data;
        // console.log(this.dataForm, 123);
        // 创建10位数组
        this.list = Array.apply(null, { length: 10 }).map(() => {
          return { xh: "", kcmc: "", xs: "", ckjc: "", xm: "", xl: "", zw: "" };
        });
        // 获取数据数组长度
        let lgh = this.dataForm.childrenVOList.length;
        // 替换数组
        this.list.splice(0, lgh, ...this.dataForm.childrenVOList);
        this.loading = false;
      });
    },
    exportWord() {
      for (let key in this.dataForm) {
        if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm.organizeId = this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA8Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "年度培训计划表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "./TABLESTYLE.scss";
input {
  // border: 1px solid #ccc !important;
}
.titleInput {
  width: 8%;
  height: 20px;
  border-bottom: 1px solid #000 !important;
  font-size: 18px;
  font-weight: 700;
}
</style>
